<template>
  <login-lay>
    <div class="sign-in">
      <div class="logo">
        <img src="../../assets/image/logo_blue.png" />
      </div>
      <div class="sign-in__title">手机号登录</div>
      <div class="sign-in__info">欢迎您登录全球派星座账号</div>
      <el-form
        ref="form"
        class="sign-in__form"
        label-position="top"
        :model="form"
        :rules="rules"
      >
        <el-form-item class="mb-30" prop="account">
          <div
            class="input-phone-004 w-full sign-in__iput"
          >
            <div class="input-phone-004__inner">
              <el-input
                v-model="form.account"
                placeholder="请输入手机号"
                type="number"
              >
                <template #prepend>
                  <div
                    class="select-004 select-004--large"
                    style="width: 116px"
                  >
                    <el-select v-model="form.areaNumber">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </div>
                </template>
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="password">
          <div
            class="input-password-004 input-password-004--clearable input-password-004--show-password w-full sign-in__iput"
          >
            <el-input
              v-model="form.password"
              placeholder="请输入登录密码"
              :type="passwordType"
            ></el-input>
            <span
              :class="
                passwordType == 'text'
                  ? 'eye_potion icon_eye_1'
                  : 'eye_potion icon_eye'
              "
              @click="changePasswordType"
            ></span>
          </div>
          <div class="text-align-right w-full mt-14">
            <RouterLink to="/forgetPassword">
              <div
                class="d-inline-block lh-22 fs-16 c-link-blue cursor-pointer"
              >
                忘记密码？
              </div>
            </RouterLink>
          </div>
        </el-form-item>
        <el-button
          class="button-004 button-004--primary button-004--large w-full mt-100 h-60 fs-16 border-radius-8"
          :disabled="submitDisabled"
          :loading="loading"
          style="background-color: #6b1ce9"
          @click="handleLogin"
        >
          登录
        </el-button>
        <div class="lh-20 mt-14 fs-16">
          <span class="c-gray-blue">暂未注册全球派账号？</span>
          <RouterLink to="/register">
            <span class="c-link-blue cursor-pointer">立即注册</span>
          </RouterLink>
        </div>
      </el-form>

      <!--实名认证 -->
      <hsk-dialog
        :visible.sync="dialogVisible"
        title="实名认证"
        width="833px"
        :before-close="beforeCloseHandler"
        :close-on-click-modal="false"
        :center="false"
        :showFooter="false"
        custom-class="custom-dialog"
        :show-footer="false"
        @confirm="handleConfirm"
        @cancel="handleCancel"
        :confirm-loading="confirmLoading"
      >
        <el-form
          :model="formVaild"
          :rules="rulesVaild"
          ref="formVaild"
          label-position="top"
        >
          <div class="fs-16 c-333">基本信息</div>
          <el-form-item class="mb-0 mt-18">
            <template #label>
              <div class="d-flex text-align-center">
                <div class="fs-14 fw-600 c-333 red_dot">营业执照照片</div>
                <div class="fs-12 c-ashs ml-8">
                  请确保图片上的文字清晰可见,图片支持JP
                </div>
              </div>
            </template>
            <div class="d-flex w-full"  style="margin-top:10px">
              <el-upload
                ref="upload"
                v-loading="imageUrlLoad"
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :http-request="(data) => uploadFile(data, 2)"
                :on-success="
                  (response, uploadFile) =>
                    handleAvatarSuccess(response, uploadFile, 'imageUrl')
                "
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formVaild.imageUrl"
                  :src="formVaild.imageUrl"
                  class="avatar"
                />
                <el-icon
                  v-else
                  class="avatar-uploader-icon el-icon-plus"
                ></el-icon>
              </el-upload>
            </div>
          </el-form-item>
          <el-form-item  class="mb-0 mt-18 ">
            <template #label>
              <div class="d-flex">
                <div class="fs-14 lh-20 fw-600 c-333 red_dot">企业名</div>
              </div>
            </template>
            <div class="d-flex ">
              <el-input
                disabled
                v-model="company_data.company_name"
                :clearable="false"
                placeholder="请输入企业名称"
                style=""
                class="input_vaild"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item prop="" class="mb-0 mt-18 w-full pb-22 bd_line">
            <template #label>
              <div class="d-flex">
                <div class="fs-14 lh-20 fw-600 c-333 red_dot">经营地址</div>
              </div>
            </template>

            <el-input
              v-model="company_data.company_address"
              class="input_vaild_textare"
              :rows="2"
              type="textarea"
              disabled
              placeholder="请输入详细地址"
            />
          </el-form-item>

          <div class="fs-16 c-333 pt-22 pb-22">法人信息</div>
          <el-form-item prop="" class="mb-0 mt-18 w-full">
            <template #label>
              <div class="d-flex">
                <div class="fs-14 lh-20 fw-600 c-333 red_dot">证件类型</div>
              </div>
            </template>
            <div class="d-flex w-full">
              <el-select
                :clearable="false"
                v-model="cardType"
                class="input_vaild_select"
              >
                <el-option
                  v-for="item in cardOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  {{ item.label }}
                </el-option>
              </el-select>
            </div>
          </el-form-item>

          <el-form-item prop="cardUrl1" class="mb-0 mt-18 w-full pb-22 bd_line">
            <template #label>
              <div class="d-flex">
                <div class="fs-14 lh-20 fw-600 c-333 red_dot">证件照</div>
              </div>
            </template>
            <div class="d-flex w-full"  style="margin-top:10px">
              <el-upload
                ref="upload1"
                v-loading="cardUrl1Load"
                class="avatar-uploader"
                action="#"

                :show-file-list="false"
                :http-request="(data) =>uploadFile(data,3)"
                :on-success="
                  (response, uploadFile) =>
                    handleAvatarSuccess(response, uploadFile, 'cardUrl1')
                "
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formVaild.cardUrl1"
                  :src="formVaild.cardUrl1"
                  class="avatar"
                />
                <div v-else>
                  <el-icon class="avatar-uploader-icon  el-icon-plus"/>
                  <div class="uploader_lab">人像面</div>
                </div>
              </el-upload>
              <el-upload
                ref="upload2"
                class="avatar-uploader ml-24"
                :show-file-list="false"
                v-loading="cardUrl2Load"
                action="#"
                :http-request="(data) => uploadFile(data, 4, 'cardUrl2')"
                :on-success="
              (response, uploadFile) =>
                handleAvatarSuccess(response, uploadFile, 'cardUrl2')
            "
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formVaild.cardUrl2"
                  :src="formVaild.cardUrl2"
                  class="avatar"
                />
                <div v-else>
                  <el-icon class="avatar-uploader-icon  el-icon-plus"></el-icon>
                  <div class="uploader_lab">国徽面</div>
                </div>
              </el-upload>
              <el-upload
                ref="upload3"
                class="avatar-uploader ml-24"
                :show-file-list="false"
                v-loading="cardUrl3Load"
                action="#"
                :http-request="(data) => uploadFile(data, 5, 'cardUrl3')"
                :on-success="
              (response, uploadFile) =>
                handleAvatarSuccess(response, uploadFile, 'cardUrl3')
            "
                :before-upload="beforeAvatarUpload"
              >
                <img
                  v-if="formVaild.cardUrl3"
                  :src="formVaild.cardUrl3"
                  class="avatar"
                />
                <div v-else>
                  <el-icon class="avatar-uploader-icon  el-icon-plus"></el-icon>
                  <div class="uploader_lab">手持身份证</div>
                </div>
              </el-upload>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18 ">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">姓名</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入姓名"
                    v-model="cardData.id_card_name"
                    :clearable="false"
                    class="  input_vaild"
                  />
                </div>
              </el-form-item>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18 ">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">地址</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入地址"
                    v-model="cardData.id_card_address"
                    :clearable="false"
                    class=" input_vaild"
                  />

                </div>
              </el-form-item>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18 ">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">身份证号</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入身份证号"
                    v-model="cardData.id_card_num"
                    :clearable="false"
                    class="  input_vaild "
                  />

                </div>
              </el-form-item>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">出生日期</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入出生日期"
                    v-model="cardData.id_card_birthday"
                    :clearable="false"
                    class=" input_vaild "
                  />

                </div>
              </el-form-item>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18 ">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">民族</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入民族"
                    v-model="cardData.id_card_nation"
                    :clearable="false"
                    class=" input_vaild "
                  />

                </div>
              </el-form-item>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18 ">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">性别</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入性别"
                    v-model="cardData.id_card_sex"
                    :clearable="false"
                    class=" input_vaild "
                  />

                </div>
              </el-form-item>
            </div>
            <div style="overflow: hidden; width: 100%">
              <el-form-item prop="" class="mb-0 mt-18 ">
                <template #label>
                  <div class="d-flex">
                    <div class="fs-14 lh-20 fw-600 c-333 red_dot">身份证有效期</div>
                  </div>
                </template>
                <div class="d-flex">
                  <el-input
                    disabled
                    placeholder="请输入身份证有效期"
                    v-model="cardBackData.id_card_timelimit"
                    :clearable="false"
                    class=" input_vaild "
                  />

                </div>
              </el-form-item>
            </div>

          </el-form-item>

<!--          <el-form-item  class="mb-0 mt-18">
            <template #label>
              <div class="d-flex text-align-center">
                <div class="fs-14 fw-600 c-333 red_dot">营业执照照片</div>
                <div class="fs-12 c-ashs ml-8">
                  请确保图片上的文字清晰可见,图片支持JP
                </div>
              </div>
              <div class="d-flex w-full">
                <el-upload
                  ref="upload"
                  v-loading="imageUrlLoad"
                  action="#"
                  class="avatar-uploader"
                  :show-file-list="false"
                  :http-request="(data) =>uploadPic(data,2)"
                  :before-upload="beforeAvatarUpload"
                  :on-success="
              (response, uploadFile) =>
                handleAvatarSuccess(response, uploadFile, 'imageUrl')
            "
                >
                  <img
                    style="height:100px"
                    v-if="formVaild.imageUrl"
                    :src="formVaild.imageUrl"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </template>
          </el-form-item>-->
        </el-form>
      </hsk-dialog>

      <!-- 信任设备 -->
      <hsk-dialog
        :visible.sync="login_dialog"
        :title="valid_title"
        :width="width"
        :before-close="beforeCloseHandler"
        :close-on-click-modal="false"
        :center="false"
        :showFooter="false"
        custom-class="custom-dialog"
        :show-footer="false"
        @confirm="handleConfirm"
        @cancel="handleCancel"
        :confirm-loading="confirmLoading"
      >
        <el-form
          ref="form_trust"
          class="sign-in__form"
          label-position="top"
          :model="form_trust"
          :rules="rules_trust"
          style="margin-top: 0px"
        >
          <el-form-item prop="mobile" class="mb-30">
            <div
              class="input-phone-004 w-full sign-in__iput"
              style="overflow: hidden; border-radius: 10px"
            >
              <div class="input-phone-004__inner">
                <el-input
                  v-model="form_trust.mobile"
                  placeholder="请输入手机号"
                  disabled
                  style="font-size: 20px"
                  type="number"
                >
                  <template #prepend>
                    <div
                      class="select-004 select-004--large"
                      style="width: 116px"
                    >
                      <el-select v-model="form_trust.areaNumber">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value"
                        />
                      </el-select>
                    </div>
                  </template>
                </el-input>
              </div>
            </div>
          </el-form-item>
          <el-form-item prop="code" class="mb-30">
            <div
              class="input-password-004 input-password-004--clearable input-password-004--show-password w-full sign-in__iput"
              style="overflow: hidden; border-radius: 10px"
            >
              <el-input
                v-model="form_trust.code"
                placeholder="请输入验证码"
                type="test"
              ></el-input>
              <span
                class="eye_potion"
                style="
                  width: 120px;
                  font-size: 16px;
                  font-weight: bold;
                  color: #6b1ce9;
                  text-align: center;
                "
                :disabled="isGetphone"
                @click="sendPhoneCode()"
              >
                {{ phoneCode }}
              </span>
            </div>
          </el-form-item>
          <el-form-item prop="mobile">
            <div style="position: relative">
              <input
                type="checkbox"
                id="checkbox"
                v-model="form_trust.isLong"
                style="
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  margin-right: 10px;
                "
              />
              <label
                for="checkbox"
                style="
                  position: absolute;
                  top: -5px;
                  left: 30px;
                  display: inline-block;
                  width: 200px;
                "
              >
                30天内此设备免验证
              </label>
            </div>
          </el-form-item>
          <el-button
            class="button-004 button-004--primary button-004--large w-full h-60 fs-16 border-radius-8 mb-20"
            :disabled="submitDisabled"
            :loading="loading"
            style="background-color: #6b1ce9"
            @click="handleSubmitTrust"
          >
            确认
          </el-button>
        </el-form>
      </hsk-dialog>
    </div>
  </login-lay>
</template>

<script>
  import LoginLay from '@/vab/layouts/LoginLay.vue'
  import { mapActions, mapGetters } from 'vuex'
  import { translateTitle } from '@/utils/i18n'
  import { isPassword, isPhone } from '@/utils/validate'
  import HuskDialog from '@/vab/components/VabDialog'
  import { getCode } from '@/api/sms'
  import { register, addTrust, importPhoto } from '@/api/user'
  import axios from 'axios';


  export default {
    name: 'Login',
    components: {
      LoginLay,
      HuskDialog,
    },
    directives: {
      focus: {
        inserted(el) {
          el.querySelector('input').focus()
        },
      },
    },
    beforeRouteLeave(to, from, next) {
      clearInterval(this.timer)
      next()
    },
    data() {
      const validateUsername = (rule, value, callback) => {
        if (!isPhone(value))
          callback(new Error(this.translateTitle('手机号格式不对')))
        else callback()
      }
      const validatePassword = (rule, value, callback) => {
        if (!isPassword(value))
          callback(
            new Error(
              this.translateTitle(
                '密码至少包含数字,大写字母、小写字母且长度至少为8个字符!'
              )
            )
          )
        else callback()
      }
      return {
        //验证码
        trust_status: false,
        vaild_status: false,
        isGetphone: false,
        getPhoneIntval: null,
        phoneCode: '获取验证码',
        // 弹窗
        valid_title: '实名认证',
        dialogVisible: false,
        login_dialog: false,
        confirmLoading: true,

        //region 实名认证
        //执照处于加载状态
        imageUrlLoad: false,
        cardUrl1Load: false,
        cardUrl2Load: false,
        cardUrl3Load: false,

        width: '866',
        formVaild:{
          imageUrl: "",
          cardUrl1: "",
          cardUrl2: "",
          cardUrl3: "",
          email: "",
          email_code: "",
        },
        rulesVaild:{

        },

        //执照返回数据
        company_data:{
          company_name: "",
          company_address: "",
        },
        //身份证返回信息
        cardData:{

        },
        cardBackData:{

        },

        cardOptions:[
          {
            value: 0,
            label: "身份证",
          },
        ],
        cardType:0,

        isSendCode:false,

        //endregion 实名认证


        form_login:{

        },
        rules_login:{

        },

        form: {
          account: '',
          password: '',
          fingerprint: navigator.userAgent,
          areaNumber: '+86',
        },
        rules: {
          account: [
            {
              required: true,
              trigger: 'blur',
              validator: validateUsername,
            },
          ],
          password: [
            {
              required: true,
              trigger: 'blur',
              validator: validatePassword,
            },
          ],
        },

        form_trust: {
          areaNumber: '+86',
          mobile: '',
          code: '',
          isLong: '',
        },
        rules_trust: {
          account: [
            {
              required: true,
              trigger: 'blur',
              validator: validateUsername,
            },
          ],
          code: [
            {
              required: true,
              trigger: 'blur',
              message: '验证码不能空',
            },
          ],
        },
        submitDisabled: false,
        loading: false,
        passwordType: 'password',
        redirect: undefined,
        timer: 0,
        codeUrl: 'https://www.oschina.net/action/user/captcha',
        previewText: '',
        options: [
          {
            value: '+86',
            label: '+86',
          },
        ],
      }
    },
    computed: {
      ...mapGetters({
        title: 'settings/title',
      }),
    },
    watch: {
      $route: {
        handler(route) {
          this.redirect = (route.query && route.query.redirect) || '/'
        },
        immediate: true,
      },
    },
    mounted() {
      this.form.account = '18659350916'
      this.form.password = '123456aA'
      this.exportToExcel()
    },
    methods: {
      ...mapActions({
        login: 'user/login',
      }),
      translateTitle,
      handlePassword() {
        this.passwordType === 'password'
          ? (this.passwordType = '')
          : (this.passwordType = 'password')
        this.$nextTick(() => {
          this.$refs.password.focus()
        })
      },
      handleRoute() {
        return this.redirect === '/404' || this.redirect === '/403'
          ? '/'
          : this.redirect
      },
      handleLogin() {
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            try {
              this.loading = true
              await this.login(this.form).catch((res) => {
                if (res.code == 7011) {
                  this.valid_title = '添加信任设备'
                  this.width = '550px'
                  this.login_dialog = true
                  this.form_trust.mobile = this.form.account
                  this.trust_status = false
                  return false
                } else if (res.code == 1) {
                  this.trust_status = true
                }

                if (res.data.is_vaild == 0) {
                  this.valid_title = '实名认证'
                  this.width = '1000px'
                  this.dialogVisible = true
                  this.vaild_status=false;
                  return false;
                }else if(res.data.is_vaild == 1){
                  this.vaild_status=true;
                }else if(res.data.is_vaild == 2){
                  this.vaild_status=true;
                }else if(res.data.is_vaild == 3){
                  this.vaild_status=false;
                }
                if(this.trust_status&&this.vaild_status){
                  this.$router.push('/home')
                }
              })

              //await this.$router.push(this.handleRoute())
            } finally {
              this.loading = false
            }

          }
        })
      },
      handleSubmitTrust() {
        this.$refs.form_trust.validate(async (valid) => {
          if (valid) {
            let data = {
              mobile: this.form_trust.mobile,
              fingerprint: navigator.userAgent,
              mobile_code: this.form_trust.code,
              is_long: this.form_trust.is_long,
            }
            const { code, msg } = await addTrust(data)
            if (code === 1) {
              this.$baseMessage(msg, 'success')
              this.trust_status = true
              //重新提交登录接口
              this.handleLogin()

              // this.$router.push('/login')
            } else {
              this.isGetphone = false
              this.$baseMessage(msg, 'error')
            }
          }
        })
      },
      beforeCloseHandler(done) {
        //this.$message.info('点击了“X”操作')
        done()
      },
      handleConfirm() {
        //this.$message.success('点击了确定按钮')
      },
      handleCancel() {
        //this.$message.info('点击了取消按钮')
      },
      changeCode() {
        this.codeUrl = `https://www.oschina.net/action/user/captcha?timestamp=${new Date().getTime()}`
      },

      changePasswordType() {
        this.passwordType =
          this.passwordType == 'password' ? 'text' : 'password'
      },
      sendPhoneCode () {
        this.$refs.form_trust.validateField(['mobile'], async (error) => {
          if (!error) {
            console.log(error);

            if (!this.isGetphone) {
              let data = {
                mobile: this.form_trust.mobile,
                event: "trust"
              }
              this.isGetphone = true
              const { code, msg } = await getCode(data)
              if (code === 1) {
                this.$baseMessage(msg, 'success')
                this.getPhoneCode()
              } else {
                this.isGetphone = false
                this.$baseMessage(msg, 'error')
              }
            } else {
              return
            }
          } else {
            this.$message.error('请输入正确的手机号')
          }
        })
      },

      getPhoneCode () {
        let n = 60
        this.getPhoneIntval = setInterval(() => {
          if (n > 0) {
            n--
            this.phoneCode = '已发送(' + n + 's)'
          } else {
            this.getPhoneIntval = null
            clearInterval(this.getPhoneIntval)
            this.phoneCode = '获取验证码'
            this.isGetphone = false
          }
        }, 1000)
      },

      async uploadFile(data,type) {
        if(type==2){
          this.imageUrlLoad = true;
        }else if(type==3){
          this.cardUrl1Load = true;
        }else if(type==4){
          this.cardUrl2Load = true;
        }else if(type==5){
          this.cardUrl3Load = true;
        }
        let formData = new FormData();
        formData.append("photo", data.file);
        formData.append("type", type);
        formData.append("token", localStorage.getItem("token"));
        const res = await importPhoto(formData);
        if(type==2){
          this.company_data = res.data.response_data;
          this.imageUrlLoad = false;
        }else if(type==3){
          this.cardData= res.data.response_data;
          this.cardUrl1Load = false;
        }else if(type==4){
          this.cardBackData=res.data.response_data;
          this.cardUrl2Load = false;
        }else if(type==5){
          this.cardUrl3Load = false;
        }

      },

      handleAvatarSuccess(response, uploadFile, key) {
        this.formVaild[key] = URL.createObjectURL(uploadFile.raw)
      },

      beforeAvatarUpload() {},
      exportToExcel(){
        var url = 'https://borderpays.com/api/export/card'; // 替换为实际接口地址
        const token = localStorage.getItem("token"); // 如果需要认证，替换为实际token
        url=url+"?token="+token;
        axios({
          url: url,
          method: 'GET',
          responseType: 'blob', // 重要：设置响应类型为blob，以接收文件流
          headers: {
            'token':token // 如果需要认证，添加认证头部
          }
        }).then(response => {
          const url = window.URL.createObjectURL(new Blob([response.data]));
          const link = document.createElement('a');
          link.href = url;
          link.setAttribute('download', 'export.xlsx'); // 自定义文件名
          document.body.appendChild(link);
          link.click();
        }).catch(error => {
          console.error('导出失败:', error);
        });
      }

    },
  }
</script>

<style lang="scss" scoped>
  .eye_potion {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
  .icon_eye_1 {
    background-image: url('../../assets/image/eye_1.png');
    background-position: 1px;
    background-size: 100%;
  }
  .icon_eye {
    background-image: url('../../assets/image/eye.png');
    background-position: 1px;
    background-size: 100%;
  }
  .sign-in {
    position: relative;
    width: 100%;
    margin-top: 50px;
    .logo {
      position: absolute;
      top: -100px;
      left: 50%;
      width: 156px;
      height: 46px;
      margin-left: -78px;
      img {
        width: 100%;
      }
    }
    .sign-in__title {
      font-size: 30px;
      font-weight: 600;
      line-height: 53px;
      color: #000000;
    }
    .sign-in__info {
      margin-top: 4px;
      font-size: 16px;
      line-height: 28px;
      color: #666666;
    }
    .sign-in__form {
      margin-top: 60px;
      .sign-in__iput {
        height: 60px;
      }
    }
    .input-004--normal {
      height: 60px !important;
    }
    .el-form-item {
    }
  }

  ::v-deep(.el-input__wrapper) {
    background-color: unset !important;
    box-shadow: unset !important;
  }
  ::v-deep(.el-select) {
    &.el-select--disabled {
      border-style: none;
    }
  }

  ::v-deep(.el-form-item__error) {
    height: 0;
    font-size: 15px;
    line-height: 20px;
    color: var(--color-red);
    transition: height 0.3s;
  }
  ::v-deep {
    .el-select__wrapper {
      height: 100%;
    }
    .el-select__wrapper.is-disabled {
      background: none;
      box-shadow: none;
    }
    .select-004--large .el-select {
      background: none;
      border: none;
    }
    .input-004 {
      background: #f3f4f5;
    }
    .el-input-group__prepend {
      border: none;
      box-shadow: none;
    }
    .el-input-group--prepend
      .el-input-group__prepend
      .el-select
      .el-select__wrapper {
      background: #f3f4f5;
      box-shadow: none;
    }
    .select-004--large .el-select {
      margin: 0;
    }
    .el-select__wrapper {
      font-size: 22px;
    }
    .input-phone-004 .el-select .el-input__icon {
      display: none;
      border: none;
    }
    .el-input__inner {
      height: 60px;
      font-size: 20px;
      color: #000;
      background: #f3f4f5;
      border: none;
    }
    .input_vaild .el-input__inner {
      width:349px;
      height: 34px;
      border: 1px solid rgba(204, 204, 204, 1);
      margin: 6px 0 0 0px;
      font-size: 13px;
      font-weight: normal;
      text-align: left;
    }

    .input_vaild_textare .el-textarea__inner{
      width:349px;
      height: 67px;
      border: 1px solid rgba(204, 204, 204, 1);
      margin: 8px 0 0 0;
      font-size: 13px;
      font-weight: normal;
      text-align: left;
    }

    .input_vaild_select .el-input__inner{
      width:349px;
      height: 34px;
      border: 1px solid rgba(204, 204, 204, 1);
      margin: 8px 0 0 0;
      font-size: 13px;
      font-weight: normal;
      text-align: left;
    }

  }

  //region  实名认证

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    border: 1px dashed #c9c6c6;
    border-radius: 5px;
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;

  }
  .avatar {
    height: 100px;
    display: block;
  }

  //自定义




  //endregion  实名认证


</style>
